Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 12 | Author: cody 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Hamburger Menu</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<label class="debug">
  <input id="debug" type="checkbox">
  Debug
</label>
<div class="grid">
  <div class="menu cross menu--1">
    <label>
      <input type="checkbox">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="30" />
        <path class="line--1" d="M0 40h62c13 0 6 28-4 18L35 35" />
        <path class="line--2" d="M0 50h70" />
        <path class="line--3" d="M0 60h62c13 0 6-28-4-18L35 65" />
      </svg>
    </label>
  </div>
  <div class="menu cross menu--2">
    <label>
      <input type="checkbox">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="30" />
        <path class="line--1" d="M0 70l28-28c2-2 2-2 7-2h64" />
        <path class="line--2" d="M0 50h99" />
        <path class="line--3" d="M0 30l28 28c2 2 2 2 7 2h64" />
      </svg>
    </label>
  </div>
  <div class="menu back menu--3">
    <label>
      <input type="checkbox">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="30" />
        <path class="line--1" d="M0 40h62c18 0 18-20-17 5L31 55" />
        <path class="line--2" d="M0 50h80" />
        <path class="line--3" d="M0 60h62c18 0 18 20-17-5L31 45" />
      </svg>
    </label>
  </div>
  <div class="menu back menu--4">
    <label>
      <input type="checkbox">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="30" />
        <path class="line--1" d="M0 55l14-10c4.7-3.3 9-5 13-5h72" />
        <path class="line--2" d="M0 50h99" />
        <path class="line--3" d="M0 45l14 10c4.7 3.3 9 5 13 5h72" />
      </svg>
    </label>
  </div>
</div>
<!-- partial -->
  
</body>
</html>

Share this file: